<template>
  <n-button
    :class="{ 'pro-icon-button': true, 'is-not-loading': !showButtonLoading }"
    v-bind="buttonProps"
  >
    <template #icon>
      <icons
        :name="`i-${name}`"
        :size="iconProps?.size || 12"
        :themeReverse="iconProps?.themeReverse ? iconProps.themeReverse : true"
        v-bind="iconProps"
      />
    </template>
    {{ text }}
  </n-button>
</template>

<script lang="ts" setup name="">
  import { ButtonProps } from 'naive-ui'
  import { PropsType as IconPropsType } from '@/components/icons/index.vue'

  interface PropsType {
    // 按钮内容
    text?: string
    // 图标名称 不带 i-
    name?: string
    // 图标属性
    iconProps?: IconPropsType
    // 按钮属性
    buttonProps?: ButtonProps
  }
  const props = withDefaults(defineProps<PropsType>(), {
    text: '确定',
    name: 'check'
  })

  const { buttonProps } = toRefs(props)
  const showButtonLoading = computed(() => {
    return buttonProps?.value?.loading
  })
</script>

<style lang="less">
  // 按钮文字和图标间距调整（loading状态时不调整）
  .pro-icon-button {
    &.is-not-loading {
      .n-button__icon {
        margin: 0;
      }
    }
  }
</style>
